<template>
	<div>
		<div>
			<el-input v-model="group.groupName" size="mini" placeholder="输入小组名~" style="padding: 0 15px; width: 250px;"></el-input>
			<el-button size="mini" type="primary" icon="el-icon-plus" @click="createGroup">创建</el-button>
		</div>
		<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
		<el-table :data="groupsList" stripe style="width: 100%">
			<el-table-column prop="groupName" label="小组名" width="180">
			</el-table-column>

			<el-table-column prop="isenable" label="是否可用" width="150">
			</el-table-column>

			<el-table-column prop="createTime" label="创建时间">
			</el-table-column>

			<el-table-column fixed="right" label="操作" width="250">
				<template slot-scope="scope">
					<el-button type="primary" style="padding: 3px; margin: 0 10px;" @click="moreInfomation(scope.$index, scope.row)">组内情况</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog title="组内情况" :visible.sync="dialogTableVisible">
			<el-table :data="worksList">
				<el-table-column prop="worksName" label="作品名称" fixed width="150">
				</el-table-column>
				<el-table-column prop="username" label="作者名" width="130">
				</el-table-column>
				<el-table-column prop="createTime" label="提交时间" width="230">
				</el-table-column>
				<el-table-column prop="startCheck" label="是否开始评分" width="130">
				</el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "Group",
		data() {
			return {
				groupsList: [],
				dialogTableVisible: false,
				group: {
					groupName: "",
				},
				worksList: [],
			}
		},
		mounted() {
			this.initGroupsList();
		},
		methods: {
			// 获取当前小组内所有的作品
			moreInfomation(index, row) {
				this.worksList = [];
				this.dialogTableVisible = true;
				this.getRequest("/group/getWorksByGroupId/?id=" + row.id).then(res => {
					if (res) {
						this.worksList = res.obj;
					}
				})
			},
			initGroupsList() {
				this.getRequest("/group/").then(res => {
					if (res) {
						console.log(res.obj);
						this.groupsList = res.obj;
					}
				})
			},
			createGroup() {
				if (!this.group.groupName) {
					return this.$message({
						message: '请先输入组名',
						type: 'warning'
					});
				}
				this.postRequest("/group/", this.group).then(res => {
					this.group.groupName = "";
					this.initGroupsList();
				})
			}
		},
	}
</script>

<style>
</style>
